<template>
  <div>
    <!-- 渲染模板 -->
    <div ref="stateDom" style="position: relative;" @click="checked">
      <!-- 导入详细信息card -->
      <tagCards :tagCardsOpen="tagCardsOpen" id="messageTag" />
      <!-- 加载页 -->
      <Transition name="fade">
        <loadingView v-if="!loadingState" />
      </Transition>
      <!-- 中控 -->
      <control class="control" />
    </div>
  </div>
</template>
<script setup>
// 引入Three.js
import * as THREE from 'three'
// 导入Vue组合API
import { onMounted, ref, onUnmounted, reactive, nextTick, toRefs } from 'vue'
// 导入three.js配置文件
import startRender from './settings/RenderLoop'
import { camera } from './settings/RendererCamera.js'
// 获取需要交互的模型对象
import { contentModel } from './settings/model.js'
// 导入2D创建object
import { tagCard } from './settings/tag.js'
// 导入详细信息card
import tagCards from './components/tagCarde'
// 导入加载页
import loadingView from './components/loading'
// 导入中控
import control from './components/control'
// 导入场景
// import { contentScene } from './settings/scene'
// 获取元素的Dom
const stateDom = ref(null)
// 解构渲染操作
const { render, renderer, labelRenderer } = startRender()
// 储存选中的网格模型对象
const context = reactive({
  chooseMesh: null,
  messageTag: null,
  tagCardsOpen: null
})
// 结构
const { tagCardsOpen } = toRefs(context)
const { loadingState } = toRefs(contentModel)
// console.log(loadingState)
// 进行模型选中的操作
const checked = () => {
  // 判断上次是否有选过网格模型对象
  if (context.chooseMesh) {
    // 把上次选中的mesh设置为原来的颜色
    context.chooseMesh.material.color.set('#ffffff')
  }
  const Sx = window.event.clientX // 鼠标单击位置横坐标
  const Sy = window.event.clientY // 鼠标单击位置纵坐标
  // 屏幕坐标转WebGL标准设备坐标
  const x = (Sx / window.innerWidth) * 2 - 1 // WebGL标准设备横坐标
  const y = -(Sy / window.innerHeight) * 2 + 1 // WebGL标准设备纵坐标
  // 创建一个射线投射器Raycaster
  const raycaster = new THREE.Raycaster()
  // 通过鼠标单击位置标准设备坐标和相机参数计算射线投射器Raycaster的射线属性.ray
  raycaster.setFromCamera(new THREE.Vector2(x, y), camera)
  // 返回.intersectObjects()参数中射线选中的网格模型对象
  // 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
  const intersects = raycaster.intersectObjects(contentModel.granaryArr)
  // console.log("射线器返回的对象", intersects);
  // console.log("射线投射器返回的对象 点point", intersects[0].point);
  // console.log("射线投射器的对象 几何体",intersects[0].object.geometry.vertices)
  // intersects.length大于0说明，说明选中了模型
  if (intersects.length > 0) {
    // 传递id
    context.tagCardsOpen = intersects[0].object.name
    // 赋值被点中的交互模型
    context.chooseMesh = intersects[0].object
    // 选中改变颜色，这样材质颜色贴图.map和color颜色会相乘
    context.chooseMesh.material.color.set('#00ffff')
    context.messageTag.element.style.opacity = 1 // 显示标签
    context.messageTag.position.copy(intersects[0].point)
  } else {
    context.messageTag.element.style.opacity = 0 // 隐藏标签
  }
}
onMounted(() => {
  // 进行渲染操作
  render()
  // 渲染到指定的元素中
  stateDom.value.appendChild(renderer.domElement)
  nextTick(() => {
    // 通过id 创建2D模型
    context.messageTag = tagCard('messageTag')
    contentModel.model.add(context.messageTag)
    // 设置渲染顺序
    context.messageTag.renderOrder = 2
  })
})
// 销毁
onUnmounted(() => {
  document.body.removeChild(labelRenderer.domElement)
  // contentScene.scene.remove()
  context.messageTag.element.style.opacity = 0 // 显示标签
})
</script>
<script>
export default {
  name: 'ToGranary'
}
</script>
<style lang="scss" scoped>
.control {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
